<template>
  <the-nav-bar custom>
    <template #right>
      <!-- <van-icon name="search" size="16" @click="onClickSearch" color="#fff"/> -->
      <svg-icon name="login-out" class="login-out" color="#fff" @click="loginOut" />
    </template>
  </the-nav-bar>
  <div class="page-view overflow-y flex-col">
    <van-sticky :offset-top="46">
      <div class="swipe">
        <van-swipe class="h-100" :autoplay="3000" lazy-render>
          <van-swipe-item v-for="(image, index) in images" :key="image">
            <van-image width="100%" height="100%" :src="image" fit="fill" :position="index <= 0 ? 'left' : ''" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </van-sticky>
    <div class="flex-1 overflow-y pt-20 content">
      <van-grid :column-num="2" :border="false">
        <van-grid-item v-for="(menu, index) in menus" :key="index" @click="handleMenuClick(menu)">
          <div class="flex-col-c w-100 h-100">
            <!-- <van-image src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg" /> -->
            <svg-icon :name="menu.icon" class="menu-icons keep-px" color="#aa020b" />
            <p class="text-nowrap fs-14 fa-monitor text-color-light mt-5">{{ menu.label }}</p>
          </div>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, nextTick, onMounted, onBeforeMount, inject, watch, provide } from 'vue';
import { showConfirmDialog, showDialog, closeDialog } from 'vant';

import { useRouter } from 'vue-router';
import useStore from '@/store/index';
import img_banner1 from '@/assets/images/banner1.png';
import img_banner2 from '@/assets/images/banner2.png';
import img_banner3 from '@/assets/images/banner3.jpg';
import img_banner4 from '@/assets/images/banner4.jpg';

const { user } = useStore();
const { roles } = user;
const the_loading = inject('the-loading');
const LOADING = inject('LOADING');
const router = useRouter();

/**
 * 数据部分
 */

const menus = reactive([
  { icon: 'up-send', label: '1楼外购物料上送', path: '/wglssTask' }, ///statistics
   { icon: 'up-send', label: '实时库存', path: '/inventory' }, ///statistics
]);

const images = [img_banner1, img_banner2, img_banner3, img_banner4];


onBeforeMount(() => {
  window.openURL = handlePageOpen;
});

onMounted(() => {});

function handlePageOpen(res) {
  setTimeout(() => {
    the_loading.close();
  }, 500);
}

function loginOut() {
  showConfirmDialog({
    title: '提 示',
    message: '是否退出？'
  })
    .then(async () => {
      await user.logOut();
    })
    .catch(() => {
      console.log('取消退出');
    });
}

function handleMenuClick(data) {
  if (!data.path) {
    showDialog({
      message: '功能建设中...',
      confirmButtonText: '关闭'
    });
    setTimeout(() => {
      closeDialog();
    }, 2500);

    return;
  }

  router.push({ path: data.path });
}

</script>
<style scoped lang="scss">
.login-out {
  width: 20px;
  height: 20px;
}
.van-grid {
  width: 100%;
  background-color: #fff;
}
.swipe {
  height: 25vh;
}

.content {
}

// :deep(.van-grid-item) {
//   .van-grid-item__content {
//     // max-height: 74px;
//     // display: block;
//     // padding: 0;
//   }
// }

:deep(.van-swipe-item) {
  img {
    height: 100%;
  }
}

:deep(.van-card__thumb) {
  height: 50px;
}

:deep(.van-card__content) {
  min-height: 50px;
}

:deep(.van-card__num) {
  float: left;
}

.menu-icons {
  font-size: 14px;
  width: 45vw;
  height: 10vh;
}

.text-nowrap {
  //margin-top: -10px;
}
// .content {
//   background: url('@/assets/images/home-bg.png');
// }
</style>
